<!-- 
  组件如何派发一个仓库的action
      1. this.$store.dispatch('actionName', payload)
      2. this.$store.dispatch({
        type: 'actionName',
        ...
      })

      3. 编写在 methods 中
      4. 使用 mapActions 的辅助函数

 -->

<script>
import Hello from "./components/Hello.vue";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  components: {
    Hello,
  },

  data() {
    return {
      localCount: 100,
    };
  },

  computed: {
    ...mapState(["msg", "count"]),
    ...mapGetters(["msgLen", "reverseMsg", "reverseMsgReverse"]),

    localCountPlus() {
      return this.localCount + 1;
    },

    // msgLen() {
    //   return this.$store.getters.msgLen;
    // },

    // reverseMsg() {
    //   return this.$store.getters.reverseMsg;
    // },
  },

  methods: {
    ...mapMutations(["changeMsg"]),
    // ...mapActions(["asyncChangeMsg"]),

    ...mapActions({
      abcd: "asyncChangeMsg",
    }),

    // abcd(payload) {
    //   this.$store.dispatch("asyncChangeMsg", payload);
    // },

    fn1() {
      this.$store.dispatch({
        type: "asyncChangeMsg",
        name: "张三",
      });
    },
  },
};
</script>

<template>
  <div>
    <h1>Vuex基础</h1>
    <button @click="abcd({ name: '张三' })">{{ msg }}</button>
    <button>{{ count }}</button>

    <button>msgLen: {{ msgLen }}</button>
    <button>reverseMsg:{{ reverseMsg }} {{ reverseMsgReverse }}</button>

    <hr />

    <Hello />
  </div>
</template>
